<template>
	<view class='contain'>
		<!-- <view class="head">
			<liuyuno-tabs class="tabs" :tabData="tabs" :defaultIndex="0" @tabClick='tabClick' :underLinePadding='30' :paddingLeft='79' :paddingRight='77' :checked='3'/>
		</view> -->
		<view class="swiper-tab-list">
		    <view :class="[chooseState == 1 ? 'choose' : 'no-choose']" @click="tabClick(1)">
				<text>未使用</text>
			</view>
			<view :class="[chooseState == 2 ? 'choose' : 'no-choose']" @click="tabClick(2)">
				<text>已使用</text>
			</view>
			<view :class="[chooseState == 3 ? 'choose' : 'no-choose']" @click="tabClick(3)">
				<text>已失效</text>
			</view>
		</view>
		<block v-for="(item,index) in couponList" :key="index">
			<!-- 未使用 -->
			<view class="down-quan" v-if="item.status==1">
				<view class="quan-box">
					<view class="quan-box-up">
						<view class="quan-box-up-money">
							<text>￥</text>
							<text>{{item.discountAmount}}</text>
						</view>
						<view class="quan-box-up-rules" v-if="item.couponForm==1">
							<text>满减券</text>
							<text v-if="item.useGoodsForm==1">全部商品 满{{item.satisfyAmount}}元可用</text>
							<!-- <text v-if="item.useGoodsForm==2">部分商品 满{{item.satisfyAmount}}元可用</text> -->
						</view>
						<view class="quan-box-up-rules" v-if="item.couponForm==2">
							<text>商品券</text>
							<text v-if="item.useGoodsForm==1">全部商品可用</text>
							<text v-if="item.useGoodsForm==2">部分商品可用</text>
						</view>
					</view>
					<view class="quan-box-down">
						<text v-if="item.validForm==1">有效期：{{item.effectiveTimeYear}}.{{item.effectiveTimeMonth}}.{{item.effectiveTimeDay}}-{{item.invalidTimeYear}}.{{item.invalidTimeMonth}}.{{item.invalidTimeDay}}</text>
						<text v-if="item.validForm==2">有效期：领券之日算起，{{item.validDays}}天后过期</text>
					</view>
					<view class="quan-box-down-right-img">
						<image src="../../static/img/discount/red.png"></image>
						<view class="outer" @click="goCoupon(item)">
							<text>去使用</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 已使用/以失效 -->
			<view class="down-quan" v-else>
				<view class="new-box">
					<view class="quan-box-up">
						<view class="new-quan-box-up-money">
							<text>￥</text>
							<text>{{item.discountAmount}}</text>
						</view>
						<view class="quan-box-up-rules" v-if="item.couponForm==1">
							<text>满减券</text>
							<text v-if="item.useGoodsForm==1">全部商品 满{{item.satisfyAmount}}元可用</text>
							<!-- <text v-if="item.useGoodsForm==2">部分商品 满{{item.satisfyAmount}}元可用</text -->
						</view>
						<view class="quan-box-up-rules" v-if="item.couponForm==2">
							<text>商品券</text>
							<text v-if="item.useGoodsForm==1">全部商品可用</text>
							<text v-if="item.useGoodsForm==2">部分商品可用</text>
						</view>
					</view>
					<view class="quan-box-down">
						<text v-if="item.validForm==1">有效期：{{item.effectiveTimeYear}}.{{item.effectiveTimeMonth}}.{{item.effectiveTimeDay}}-{{item.invalidTimeYear}}.{{item.invalidTimeMonth}}.{{item.invalidTimeDay}}</text>
						<text v-if="item.validForm==2">有效期：领券之日算起，{{item.validDays}}天后过期</text>
					</view>
					<view class="quan-box-down-right-img">
						<image src="../../static/img/discount/gray.png"></image>
						<view class="new-outer" @click="goCoupon(item)">
							<text v-if="item.status==2">已使用</text>
							<text v-if="item.status==3">已失效</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view v-if="noCoupon" class="noCoupon">
			<image src="../../static/img/discount/noCoupon.png"></image>
		</view>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components:{
			liuyunoTabs
		},
		data() {
			return {
				tabs: ['未使用', '已使用', '已失效'],
				//优惠券列表
				couponList:[],
				//暂无卡券
				noCoupon:false,
				//
				chooseState:'1'
			}
		},
		onLoad: function(options) {
			this.getCouponList('1')
		},
		onShow: function() {

		},
		methods: {
			
			tabClick: function(e) {
				
				this.chooseState = e
				this.couponList=[]
				//获取优惠卷列表
				this.getCouponList(e)
			},
			
			//获取优惠卷列表
			getCouponList:function(e){
				
				console.log("dada---------------------->",status)
				let params = {
					memberId: this.pub.getUserInfo().memberId,
					// memberId: this.pub.getUserInfo().memberId || "4f0abd1af84d4168ba27ac00b63fcb2e",
					status:e
				}
				this.$postApi(this.$path.GET_MY_COUPON_LIST,params).then(res => {
					console.log("优惠卷列表------------>",res.data)
					if(res.data.success){
						this.noCoupon = false
						this.couponList = res.data.data.list
						this.couponList.forEach(res=>{
							let startTime = res.effectiveTime.split(/[\s\n]/)
							startTime=startTime[0].split("-")
							res.effectiveTimeYear = startTime[0]
							res.effectiveTimeMonth = startTime[1]
							res.effectiveTimeDay = startTime[2]
											
							let endTime = res.invalidTime.split(/[\s\n]/)
							endTime=endTime[0].split("-")
							res.invalidTimeYear = endTime[0]
							res.invalidTimeMonth = endTime[1]
							res.invalidTimeDay = endTime[2]
								})
							console.log("this.couponList------------>",this.couponList)
					}else{
						this.noCoupon = true
					}
				})
			},
			goCoupon:function(item){
				//item.status 1未使用 2已使用 3已失效
				if(item.status=='2'||item.status=='3'){
					return
				}
				//useGoodsForm 1全部商品 2部分商品
				if(item.useGoodsForm=='1'){
					uni.redirectTo({
						url: '/pages/home_new/home_new',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}else{
					uni.navigateTo({
						url: '/pages/discount/coupon_list?couponId='+item.couponId+'&satisfyAmount='+item.satisfyAmount+'&discountAmount='+item.discountAmount+'&couponForm='+item.couponForm,
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.contain{
		margin: 0;
		padding: 0;
		width: 100%;
		min-width: 100%;
		font-family:PingFang SC;
		background-color:rgba(255,255,255,1);
	.head {
		// height: 100upx;
		background: transparent;
		margin-bottom: 32upx;
		.tabs {
			font-size: 28upx;
			box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0);
			// padding-left: 30upx;
						
			.underline {
				padding: 0 !important;
					}
				}
			}
		.up-image{
			width: 100%;
			height: 286upx;
			background-image: url(../../static/img/discount/linquan-center.png);
			background-size: 100% 100%;
			margin-bottom: 28upx;
		}
		.up-rules{
			width:132upx;
			height:36upx;
			background:rgba(255,255,255,1);
			opacity:0.8;
			border-top-left-radius: 18upx;
			border-bottom-left-radius: 18upx;
			text-align: center;
			font-size:26upx;
			line-height: 36upx;
			font-weight:500;
			color:rgba(255,106,24,1);
			float: right;
			margin-top: 63upx;
		}
		.down-quan{
			padding:  0 24upx;
			position: relative;
			margin-top: 32upx;
			margin-bottom: 20upx;
		}
		.new-box{
			border: 12upx solid rgba(230,230,230,1);
			border-radius:10upx;
			padding-left:41upx ;
		}
		.quan-box{
			border: 12upx solid rgba(255,230,214,1);
			border-radius:10upx;
			padding-left:41upx ;
		}
		.quan-box-up{
			width:446upx;
			height: 132upx;
			display: flex;
			align-items: center;
			border-bottom: 1upx solid rgba(179,179,179,1);
		}
		.quan-box-up-money{
			color:rgba(255,94,4,1);
		}
		.quan-box-up-money text:first-child{
			font-size:24upx;
			font-weight:500;
		}
		.quan-box-up-money text:last-child{
			font-size:76upx;
			font-weight:500;
		}
		.new-quan-box-up-money{
			color:rgba(71,71,71,1);
		}
		.new-quan-box-up-money text:first-child{
			font-size:24upx;
			font-weight:500;
		}
		.new-quan-box-up-money text:last-child{
			font-size:76upx;
			font-weight:500;
		}
		.quan-box-up-rules{
			margin-left: 29upx;
			display: flex;
			flex-direction: column;
		}
		.quan-box-up-rules text:first-child{
			font-size:32upx;
			font-weight:bold;
			color:rgba(0,0,0,1);
			margin-bottom: 10upx;
		}
		.quan-box-up-rules text:last-child{
			font-size:26upx;
			font-weight:bold;
			color:rgba(102,102,102,1);
		}
		.quan-box-down{
			height: 71upx;
			display: flex;
			align-items: center;
			font-size:22upx;
			font-weight:400;
			color:rgba(77,77,77,1);
		}
		.quan-box-down-right-img{
			width: 195upx;
			height: 223upx;
			position: absolute;
			right: 25upx;
			top: 0upx;
		}
		.quan-box-down-right-img image{
			width: 100%;
			height: 100%;
			
			// background-image: url(../../static/img/discount/red.png);
			
		}
		.new-outer{
			width:136upx;
			height:136upx;
			border-radius:50%;
			border: 15upx solid rgba(197,197,197,0.6);
			background-color: #F6F6F6;
			font-size:32upx;
			font-weight:bold;
			color:rgba(102,102,102,1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 47upx;
			right: 21upx;
		}
		.outer{
			width:136upx;
			height:136upx;
			border-radius:50%;
			border: 15upx solid rgba(252,137,114,0.6);
			background-color: #FFF4D0;
			font-size:32upx;
			font-weight:bold;
			color:rgba(255,74,71,1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 47upx;
			right: 21upx;
		}
		.outer text{
			display: inline-block;
		}
		.noCoupon{
			height: 420upx;
			margin-top: 100upx;
		}
		.noCoupon image{
			width: 100%;
			height: 100%;
		}
		
		.swiper-tab-list{
		    width: 100%;
		    text-align: center;
		    height: 88upx;
		    line-height: 88upx;
		    display: flex;
		    justify-content: space-around;
		}
		
		.no-choose{
			color:rgba(102,102,102,1);
			font-size:30upx;
			font-weight:500;
		}
		
		.choose{
		    color:rgba(255,94,4,1);
			font-size:36upx;
			font-weight:bold;
		    border-bottom: 4upx solid rgba(255,94,4,1);
		}
	}
</style>
